{% extends "service_log/sl_base.html" %}

{% load i18n %}
{% load qa_tags %}
{% load listable %}
{% load static %}

{% block head_title %}{{ page_title }}{% endblock %}

{% block extra_css %}
  {{ block.super }}
  <link href="{% static "datepicker/css/bootstrap-datepicker.min.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "multiselect/css/bootstrap.multiselect.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "daterangepicker/css/daterangepicker.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/tables.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/custom-daterangepicker.css" %}?v={{VERSION}}" rel="stylesheet">
{% endblock extra_css %}

{% block extra_js %}
  {% autoescape off %}
    {% listable view_name dom="<'row'<'col-sm-5'i><'col-sm-7'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'><'col-sm-7'p>>" requirejs=True pagination_type='bootstrap3' css_table_class='table-hover table-condensed table-custom-listable' css_input_class='btn-flat btn-sm input-sm full-width' auto_width=False %}
  {% endautoescape %}
{% endblock %}

{% block require_javascript %}
  require(['listable', 'service_event_down_time_list']);
{% endblock require_javascript %}

{% block body %}

<div class="row">
  <div class="col-md-12">
    <div class="box">
      <div class="box-header">
        <i class="fa {{ icon }} fa-fw" aria-hidden="true"></i>
        <h3 class="box-title">{{ page_title }}</h3>
      </div>
      <div class="box-body pad">
        <div class="row">
          <div class="col-md-12">
            {% trans "For Service Events Filtered Below..." %}
          </div>
          <div class="col-md-12 margin-bottom-20">
            <span id="go_down_time" class="btn btn-default btn-flat btn-sm">{% trans "Download Up Time Summary" %}</span>
          </div>
        </div>
        {{ listable_table }}
      </div>
    </div>
  </div>
</div>

{% block loading_modal %}
  <div class="loading-modal ">
    <div class="center">
      <div>
        <span class="loading-logo">QAT</span>
        <i class="fa fa-fw fa-plus fa-spin fa-2x info"></i>
      </div>
      <div>
        <b>{% trans "Calculating Down Times" %}</b>
      </div>
    </div>
  </div>
{% endblock loading_modal %}

{% endblock body %}
